<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<title>圣诞抽奖--游戏界面</title>
	<link rel="stylesheet" href="css/main.css">

	<style>
		#divbox {
			height: 30px;
			width: 80px;
			position: absolute;
			top:10%;
			right: 10%;
			z-index: 101;
			display: none;
			font-size: 20px ;
			color: red;
			font-weight: 500;

		}

		.layer {
			position: absolute;
			background-size:100% 100% ;
			background: url("img/7/layer.png") no-repeat;
			top:0%;
			left: 0%;
			width: 100%;
			height: 100%;
			opacity: 0.8;
			z-index: 1001;
			overflow: hidden;

		}
		.rule {
			margin-top: 20%;
		}
		.layer p {
			line-height: 30px;
			font-size: 25px;
			color: #fff;
			font-family: 微软雅黑;
			padding-left: 10%;
			width: 80%;
			padding-top: 20px;
		}

		.guide {
			width: 60%;
			height: auto;
			margin-left: 40%;

		}

		.guide img {
			width: 100%;
		}
	</style>
</head>
<body>

<div class="layer">
	<div class="rule">
		<p>游戏规则:</p>
		<p>滑动礼物盒,投掷到圣诞树上的3只袜子里,即可赢取60G流量奖励;</p>
		<p>仅有一次参加游戏的机会,有6次投掷机会!</p>

		<p style="text-align: center">开始吧</p>

		<div class="guide"><img src="img/7/ges.png" alt=""></div>
	</div>

</div>
<div id="divbox"></div>

<div class="mygame">
	<div class="sdtree">
		<img src="img/2/tree@2x.png">
	</div>
	<div class="oldmen">
		<img src="img/2/圣诞老人@2x.png">
	</div>
	<div class="deer">
		<img src="img/2/驯鹿@2x.png">
	</div>
	<div class="arrow">
		<img src="img/2/箭头@2x.png">
	</div>
	<div class="giftbox">
		<img src="img/2/礼盒@2x.png">
	</div>
	<div class="snowpeaces">
		<img src="img/2/雪花@2x.png">
	</div>
	<ul class="socks">
		<li>
			<img src="img/2/袜子@2x.png">
		</li>
		<li>
			<img src="img/2/袜子@2x.png">
		</li>
		<li>
			<img src="img/2/袜子@2x.png">
		</li>
	</ul>
</div>

<script src="js/jquery-2.1.4.min.js"></script>
<script>


    $(function() {

        function getScore(text) {
            var layer=document.getElementById("divbox");
            layer.innerHTML = text;
            layer.style.display="block";
            setTimeout(
                function test()
                {
                    layer.style.display="none";
                },1000);
        }


        //机会与次数
        var CHANCE = 8;

        var HEIGHT = $('.giftbox').offset().top - $('.socks').offset().top;
        var GIFT_X = $('.giftbox').offset().left;
        var GIFT_Y = $('.giftbox').offset().top;


        var SPEED_FRONT = 800;
        var SPEED_TOP = 1500;
        var DISTANCE_MID = 800;
        var ANG60 = 60 * Math.PI / 180;

        var startX,startY,endX,endY;
        var currChance = 1;

        //进球的数量
        var goal = 0;
        var sock0 = 0 , sock1 = 0,sock2 = 0;   //0 1 2 用来记录投中袜子编号


        $('.giftbox').on('touchstart',function(e) {

            startX = e.originalEvent.changedTouches[0].pageX;
            startY = e.originalEvent.changedTouches[0].pageY;

        }).on('touchend',function(e) {

            endX = e.originalEvent.changedTouches[0].pageX;
            endY = e.originalEvent.changedTouches[0].pageY;

            if (currChance <= CHANCE) {
                shot();

            }else {
                alert("机会已经用完了");
                location.href = "award_game.html?score=1&"+"sock0="+sock0+"&sock1="+sock1+"&sock2="+sock2;
            }
        });

        function shot() {

            var ang = Math.atan((startX - endX) / (startY - endY));

            if (startY < endY) {
                alert("请向上投");
                return;
            }else if (ang > ANG60 || ang < -ANG60) {
                alert("请不要投太偏");
                return;
            }

            var distance = DISTANCE_MID / Math.cos(ang);
            var time = distance / SPEED_FRONT * Math.cos(ang);

            var a = 2 * (HEIGHT - SPEED_TOP * time) / Math.pow(time, 2);

            var currTime = 0;

            var interval = setInterval(function() {

                currTime += 0.01;

                if (currTime >= time) {
                    clearInterval(interval);

                    var x = $('.giftbox').offset().left + $('.giftbox').width() / 2;
                    var y = $('.giftbox').offset().top + $('.giftbox').height() / 2;

                    if  (containes($('.socks li').eq(0), x, y)){

                        sock0 = 1;
                    }
                    if  (containes($('.socks li').eq(1), x, y)){
                        sock1 = 1;
                    }
                    if  (containes($('.socks li').eq(2), x, y)){
                        sock2 = 1;
                    }


                    if (sock0 == 1 && sock1 == 1 && sock2 == 1) {
                        location.href = "award_game.html?score=3&sock0="+sock0+"&sock1="+sock1+"&sock2="+sock2;
                    }

                    if (containes($('.socks li').eq(0), x, y)
                        || containes($('.socks li').eq(1), x, y)
                        || containes($('.socks li').eq(2), x, y)) {
                        getScore("进了");

                    }else {
                        getScore("投偏了");
                    }

                    currChance ++;
                    $('.giftbox').css('left', GIFT_X);
                    $('.giftbox').css('top', GIFT_Y);

                    return;
                }

                $('.giftbox').css('left', GIFT_X - SPEED_FRONT * currTime * Math.sin(ang));
                $('.giftbox').css('top', GIFT_Y - (SPEED_TOP * currTime + 0.5 * a * Math.pow(currTime, 2)));

            }, 10);
        }

        function containes($container, x, y) {

            var top = $container.offset().top;
            var left = $container.offset().left;
            var width = $container.width();
            var height = $container.height();

            if (x >= left && y >= top && x <= (left + width) && y <= (top + height)) {
                return true;
            }else {
                return false;
            }
        }
    });

</script>
<script>

    $(document).ready(function(){

        $(".layer").click(function (){
            $(".layer").css('display','none');
        });

    });
</script>
</body>
</html>